<template>
  <zm-body>
    <div class="app-lefter-bg" style="width:38rem"></div>
    <div class="overlay-container" v-loading="areaDataLoading">
      <zm-box4 title="普查结果">
        <div class="filter-header flex-center">
          <el-form :inline="true" size="mini" :model="filterForm">
            <el-form-item label="区域">
              <el-select
                v-model="filterForm.region"
                style="width:150px"
                placeholder="区域"
                @change="areaChangeHandler"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  :key="item.value"
                  v-for="(item) in areaOptions"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <ul class="common-num-list">
          <li
            class="common-num-item"
            :class="{active:activeNumIndex===0}"
            @click="numClickHandler(0)"
          >
            <div class="common-num-item-label">实施面积</div>
            <div class="common-num-item-num">
              <count-to :startVal="0" :endVal="mainNums.actualArea" :decimals="2" :duration="2000"></count-to>
              <span class="common-num-unit">km²</span>
            </div>
          </li>
          <li
            class="common-num-item"
            :class="{active:activeNumIndex===1}"
            @click="numClickHandler(1)"
          >
            <div class="common-num-item-label">单元网格数量</div>
            <div class="common-num-item-num">
              <count-to :startVal="0" :endVal="mainNums.gridNumber" :duration="2000"></count-to>
              <span class="common-num-unit">个</span>
            </div>
          </li>
          <li
            class="common-num-item"
            :class="{active:activeNumIndex===2}"
            @click="numClickHandler(2)"
          >
            <div class="common-num-item-label">单元网格平均面积</div>
            <div class="common-num-item-num">
              <count-to
                :startVal="0"
                :endVal="mainNums.gridAverageSize"
                :decimals="2"
                :duration="2000"
              ></count-to>
              <span class="common-num-unit">km²</span>
            </div>
          </li>
          <li
            class="common-num-item"
            :class="{active:activeNumIndex===3}"
            @click="numClickHandler(3)"
          >
            <div class="common-num-item-label">责任网格数量</div>
            <div class="common-num-item-num">
              <count-to :startVal="0" :endVal="mainNums.responsibilityGridNumber" :duration="2000"></count-to>
              <span class="common-num-unit">个</span>
            </div>
          </li>
          <li
            class="common-num-item"
            :class="{active:activeNumIndex===4}"
            @click="numClickHandler(4)"
          >
            <div class="common-num-item-label">责任网格平均面积</div>
            <div class="common-num-item-num">
              <count-to
                :startVal="0"
                :endVal="mainNums.responsibilityGridAverageSize"
                :decimals="2"
                :duration="2000"
              ></count-to>
              <span class="common-num-unit">km²</span>
            </div>
          </li>
          <li
            class="common-num-item"
            :class="{active:activeNumIndex===5}"
            @click="numClickHandler(5)"
          >
            <div class="common-num-item-label">部件数量</div>
            <div class="common-num-item-num">
              <count-to :startVal="0" :endVal="mainNums.componentNum" :duration="2000"></count-to>
              <span class="common-num-unit">个</span>
            </div>
          </li>
          <li
            class="common-num-item"
            :class="{active:activeNumIndex===6}"
            @click="numClickHandler(6)"
          >
            <div class="common-num-item-label">部件密度</div>
            <div class="common-num-item-num">
              <count-to
                :startVal="0"
                :endVal="mainNums.componentDensity"
                :decimals="2"
                :duration="2000"
              ></count-to>
              <span class="common-num-unit">个/km²</span>
            </div>
          </li>
        </ul>
        <div class="barChartBox" ref="barChartBox"></div>
        <!-- 列表 -->
        <div class="p10">
          <el-table size="small" fit :data="areaDataList" style="width: 100%">
            <el-table-column prop="areaName" label="部门" min-width="9%"></el-table-column>
            <el-table-column prop="actualArea" label="实施面积 km²" min-width="9%"></el-table-column>
            <el-table-column prop="gridNumber" label="单元网格数量" min-width="9%"></el-table-column>
            <el-table-column prop="gridAverageSize" label="单元网格平均面积 km²" min-width="9%"></el-table-column>
            <el-table-column prop="responsibilityGridNumber" label="责任网格数量" min-width="9%"></el-table-column>
            <el-table-column
              prop="responsibilityGridAverageSize"
              label="责任网格平均面积 km²"
              min-width="9%"
            ></el-table-column>
            <el-table-column prop="componentNum" label="部件数量" min-width="9%"></el-table-column>
            <el-table-column prop="componentDensity" label="部件密度(个/k㎡)" min-width="9%">
              <template slot-scope="scope">
                {{parseFloat(scope.row.componentDensity).toFixed(2)}}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </zm-box4>
    </div>
    <div
      v-loading="mapDataLoading"
      id="mapBox"
      :class="{ready:mapReady}"
      class="main-body-mapbox"
      style="height:100vh;width:100vw"
    />
  </zm-body>
</template>

<script>
/*
   功能模块  普查结果
   创建人    zgf
   更新时间  2020/04/14
   备注
*/
export default {
  name: "BasicDataIndex",
  data() {
    return {
      filterForm: {
        region: ""
      },
      areaOptions: [],
      mapReady: false,
      map: null,
      mapDataLoading: false,
      mainNums: {},
      areaDataLoading: false,
      barChartBox: null,
      areaDataList: [],

      actualAreaList: [],
      gridNumberList: [],
      gridAverageSizeList: [],
      responsibilityGridNumberList: [],
      responsibilityGridAverageSizeList: [],
      componentNumList: [],
      componentDensityList: [],
      areaLabelList: [],
      areaPositionList:[],
      activeNumIndex: 0,

      markersList:[],
      funCodeArr: [
        "actualAreaList",
        "gridNumberList",
        "gridAverageSizeList",
        "responsibilityGridNumberList",
        "responsibilityGridAverageSizeList",
        "componentNumList",
        "componentDensityList"
      ],
      funTitleArr: [
        "实施面积",
        "单元网格数量",
        "单元网格平均面积",
        "责任网格数量",
        "责任网格平均面积",
        "部件数量",
        "部件密度"
      ],
      caseList: [],
      mapPoints: []

    };
  },
  created(){

  },
  mounted() {
    this.mapInit();
    this.getPageBaseData(() => {
      // this.getAreaData();
    });
    this.$nextTick(()=>{
      this.areaDataLoading = true;
      this.$http.get(this.baseUrl.wgtj, {

      }).then((rel)=>{
        let allData = rel.data
        this.areaDataList = []
        let actualArea=0,gridNumber=0,gridAverageSize=0,responsibilityGridNumber=0,responsibilityGridAverageSize=0,componentNum=0,componentDensity=0;
        debugger
        for(let i=0;i<allData.length;i++){
          actualArea += allData[i].MJ
          gridNumber +=  allData[i].SL
          gridAverageSize += allData[i].DYWGMJ
          responsibilityGridNumber += allData[i].ZRWGSL
          responsibilityGridAverageSize += allData[i].ZRWGPJMJ ? parseFloat(allData[i].ZRWGPJMJ)  : 0
          componentNum += allData[i].BJSL ? parseFloat(allData[i].BJSL) : 0

          this.areaDataList.push(
            {
              id: i+1,
              areaName: allData[i].COMNAME,
              position:[113.220204,35.9439],
              actualArea: allData[i].MJ,
              gridNumber: allData[i].SL,
              gridAverageSize: allData[i].DYWGMJ,
              responsibilityGridNumber: allData[i].ZRWGSL,
              responsibilityGridAverageSize: allData[i].ZRWGPJMJ,
              componentNum: allData[i].BJSL ? allData[i].BJSL : 0 ,
              componentDensity: allData[i].BJMD ? allData[i].BJMD : 0
            }
          )

        }

        this.mainNums = {
          actualArea: actualArea,
          gridNumber: gridNumber,
          gridAverageSize: gridAverageSize / gridNumber,
          responsibilityGridNumber: responsibilityGridNumber,
          responsibilityGridAverageSize: responsibilityGridAverageSize / responsibilityGridNumber,
          componentNum: componentNum.toFixed(2),
          componentDensity: (componentNum / actualArea)
        };
        this.dataTransform()
        this.numClickHandler1(0)

        this.areaDataLoading = false;
      }).catch((e)=>{
        this.areaDataLoading = false;
        console.log(e)
      })
      /*    this.$http.get(this.baseUrl.sxt, {
          }).then((rel)=>{
            for(let i=0;i<rel.data.length;i++){
              this.caseList.push(
                      {
                        id: i+1,
                        title: rel.data[i].NAME,
                        img: "",
                        code: rel.data[i].ONEBYONE,
                        type: rel.data[i].DIRECTION,
                        position: [rel.data[i].X, rel.data[i].Y]
                      },
              )
            }
            debugger
            this.addPointsListToMap()
          })*/
    })
  },
  methods: {
    mapInit() {
      const AMap = window.AMap;
      this.map = new AMap.Map("mapBox", {
        mapStyle: "amap://styles/a5f6e6bd157193151290059146ec5e9b", // 设置地图的显示样式
        //viewMode: "3D",默认为2D
        turboMode: true,
        defaultCursor: "pointer",
        showBuildingBlock: true,
        expandZoomRange: true,
        zooms: [3, 20],
        zoom: 14,
        pitch: 60,
        center: [116.590346,40.14045],
        forceVector: true
      });
      let uUrl = this.baseUrl.WgUrl;
      var wms = new AMap.TileLayer.WMS({
        url: uUrl, // wms服务的url地址
        blend: false, // 地图级别切换时，不同级别的图片是否进行混合
        tileSize: 512, // 加载WMS图层服务时，图片的分片大小
        params: {
          styles:'default',
          'LAYERS': '0',
          VERSION:'1.3.0'
        } // OGC标准的WMS地图服务的GetMap接口的参数
      });

      wms.setMap(this.map);
      setTimeout(() => {
        this.mapReady = true;
      }, 1000);
    },
    //页面里需要的一些基础数据获取
    getPageBaseData(callBack) {
      setTimeout(() => {
        this.areaOptions = [
          { value: "0001", label: "南法信镇" }
        ];
        this.filterForm.region = this.areaOptions[0].value;
        if (callBack) callBack();
      }, 100);
    },
    //镇切换
    areaChangeHandler() {
      //this.getAreaData();
    },
    //批量添加点
    addPointsListToMap() {
      this.removeMapMarkers();
      for (var i in this.caseList) {
        let item = this.caseList[i];
        this.addMarkerToMap(item, i);
      }
    },
    //在地图上添加标注点
    addMarkerToMap(obj) {
      debugger
      let self = this;
      let AMap = window.AMap;
      // 点标记显示内容，HTML要素字符串
      let markerContent = `<div class="map-icon-marker" style="width: 10em">
                      <div class="map-icon-marker__icon"><i class="iconfont icon-star"></i></div>
                            <div class="map-icon-marker__label">
                        ${obj.title}
                   </div>
                  </div>`;
      //
      let position = new AMap.LngLat(obj.position[0], obj.position[1]);
      let markerAll = new AMap.Marker({
        position: position,
        // 将 html 传给 content
        icon: 'images/bujian.png',
        // 以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(2, -70),
        zooms: [10,20]
      });
      this.markersList.push(markerAll);
      // 将 markers 添加到地图
      this.map.add(markerAll);
      AMap.event.addListener(markerAll, 'click', function(e) {
        self.onallshowvideo = true
      })
    },
    //批量添加点
    addBjPointsListToMap() {
      this.removeMapMarkers();
      for (var i in this.caseList) {
        let item = this.caseList[i];
        this.addBjMarkerToMap(item, i);
      }
    },
    //在地图上添加标注点
    addBjMarkerToMap(obj) {
      debugger
      let self = this;
      let AMap = window.AMap;
      // 点标记显示内容，HTML要素字符串
      let markerContent = `<div class="map-icon-marker" style="width: 10em">
                      <div class="map-icon-marker__icon"><i class="iconfont icon-star"></i></div>
                            <div class="map-icon-marker__label">
                        ${obj.title} ${obj.code}
                   </div>
                  </div>`;
      //
      let position = new AMap.LngLat(obj.position[0], obj.position[1]);
      let markerAll = new AMap.Marker({
        position: position,
        // 将 html 传给 content
        // icon: 'images/bujian.png',
        content: markerContent,
        // 以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(2, -70),
        zooms: [15,20]
      });
      this.markersList.push(markerAll);
      // 将 markers 添加到地图
      this.map.add(markerAll);
      AMap.event.addListener(markerAll, 'click', function(e) {
        self.onallshowvideo = true
      })
    },
    removeMapMarkers() {
      this.map.remove(this.markersList);
    },
    barChartInit(data, xLabels, title) {
      this.barChartBox = this.$echarts.init(this.$refs.barChartBox);
      this.barChartBox.setOption({
        legend: {
          show: false
        },
        tooltip: {},
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          top: "5%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            fontSize: 12,
            rotate: 60,
            textStyle: {
              color: "#01AAFF"
            }
          },
          data: xLabels
        },
        yAxis: {
          axisLine: {
            show: false,
            onZero: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: ["#381F8C"]
            }
          },
          axisLabel: {
            show: true,
            fontSize: 10,
            textStyle: {
              color: "#01AAFF"
            }
          }
        },
        series: [
          {
            type: "bar",
            barWidth: "10px",
            name: title,
            itemStyle: {
              normal: {
                color: "#0272F8"
              }
            },
            data: data
          }
        ]
      });
    },
    //默认执行
    numClickHandler1(index) {
      debugger
      this.activeNumIndex = index;
      let dataList = this[this.funCodeArr[this.activeNumIndex]]
      this.barChartInit(
              dataList,
              this.areaLabelList,
              this.funTitleArr[this.activeNumIndex]
      );
      // this.removeMapMarkers()
      console.log(dataList,
              this.areaLabelList,
              this.funTitleArr[this.activeNumIndex])
      for(var i=0;i<this.areaLabelList.length;i++){
        this.addMarkerToMap({
          label:this.areaLabelList[i],
          count:dataList[i],
          position:this.areaPositionList[i]
        })
      }

    },
    //数字点击
    numClickHandler(index) {
      debugger
      this.activeNumIndex = index;
      switch (index) {
        case 0:
          this.caseList = [
            { id: 1, title: "西杜兰村", code: 1.92, position: [116.59502580648707, 40.14697789849136] },
            { id: 2, title: "三家店村", code: 0.86, position: [116.61262110795957,40.14993015449165] },
            { id: 3, title: "南卷村", code: 1.49, position: [116.62446575430846,40.15399759618978] },
            { id: 4, title: "东杜兰村", code: 0.33, position: [116.6050894529534,40.14615773975543] },
            { id: 5, title: "西海洪村", code: 0.71, position: [116.62000247481868,40.145600089333314] },
            { id: 6, title: "东海洪村", code: 1.35, position: [116.62369320316401,40.1410072132005] },
            { id: 7, title: "北法信村", code: 1.34, position: [116.61360808696237,40.13736554348905] },
            { id: 8, title: "大江洼村", code: 0.19, position: [116.59880232394205,40.135495461869105] },
            { id: 9, title: "焦各庄村", code: 0.62, position: [116.60794331077992,40.13277217936702] },
            { id: 10, title: "刘家河村", code: 1.12, position: [116.61189149628572,40.12830969412716] },
            { id: 11, title: "南法信村", code: 2.43, position: [116.60880165103403,40.11908859518438] }
          ];

           break;
        case 1:
          this.caseList = [
            { id: 1, title: "西杜兰村", code: 1, position: [116.59502580648707, 40.14697789849136] },
            { id: 2, title: "三家店村", code: 1, position: [116.61262110795957,40.14993015449165] },
            { id: 3, title: "南卷村", code: 1, position: [116.62446575430846,40.15399759618978] },
            { id: 4, title: "东杜兰村", code: 1, position: [116.6050894529534,40.14615773975543] },
            { id: 5, title: "西海洪村", code: 1, position: [116.62000247481868,40.145600089333314] },
            { id: 6, title: "东海洪村", code: 1, position: [116.62369320316401,40.1410072132005] },
            { id: 7, title: "北法信村", code: 1, position: [116.61360808696237,40.13736554348905] },
            { id: 8, title: "大江洼村", code: 1, position: [116.59880232394205,40.135495461869105] },
            { id: 9, title: "焦各庄村", code: 1, position: [116.60794331077992,40.13277217936702] },
            { id: 10, title: "刘家河村", code: 1, position: [116.61189149628572,40.12830969412716] },
            { id: 11, title: "南法信村", code: 1, position: [116.60880165103403,40.11908859518438] }
          ];

          break;
        case 2:
          this.caseList = [
            { id: 1, title: "西杜兰村", code: 1.92, position: [116.59502580648707, 40.14697789849136] },
            { id: 2, title: "三家店村", code: 0.86, position: [116.61262110795957,40.14993015449165] },
            { id: 3, title: "南卷村", code: 1.49, position: [116.62446575430846,40.15399759618978] },
            { id: 4, title: "东杜兰村", code: 0.33, position: [116.6050894529534,40.14615773975543] },
            { id: 5, title: "西海洪村", code: 0.71, position: [116.62000247481868,40.145600089333314] },
            { id: 6, title: "东海洪村", code: 1.35, position: [116.62369320316401,40.1410072132005] },
            { id: 7, title: "北法信村", code: 1.34, position: [116.61360808696237,40.13736554348905] },
            { id: 8, title: "大江洼村", code: 0.19, position: [116.59880232394205,40.135495461869105] },
            { id: 9, title: "焦各庄村", code: 0.62, position: [116.60794331077992,40.13277217936702] },
            { id: 10, title: "刘家河村", code: 1.12, position: [116.61189149628572,40.12830969412716] },
            { id: 11, title: "南法信村", code: 2.43, position: [116.60880165103403,40.11908859518438] }
          ];

          break;
        case 3:
          this.caseList = [
            { id: 1, title: "西杜兰村", code: 1, position: [116.59502580648707, 40.14697789849136] },
            { id: 2, title: "三家店村", code: 1, position: [116.61262110795957,40.14993015449165] },
            { id: 3, title: "南卷村", code: 1, position: [116.62446575430846,40.15399759618978] },
            { id: 4, title: "东杜兰村", code: 1, position: [116.6050894529534,40.14615773975543] },
            { id: 5, title: "西海洪村", code: 1, position: [116.62000247481868,40.145600089333314] },
            { id: 6, title: "东海洪村", code: 1, position: [116.62369320316401,40.1410072132005] },
            { id: 7, title: "北法信村", code: 1, position: [116.61360808696237,40.13736554348905] },
            { id: 8, title: "大江洼村", code: 1, position: [116.59880232394205,40.135495461869105] },
            { id: 9, title: "焦各庄村", code: 1, position: [116.60794331077992,40.13277217936702] },
            { id: 10, title: "刘家河村", code: 1, position: [116.61189149628572,40.12830969412716] },
            { id: 11, title: "南法信村", code: 1, position: [116.60880165103403,40.11908859518438] }
          ];

          break;
        case 4:
          this.caseList = [
            { id: 1, title: "西杜兰村", code: 1.92, position: [116.59502580648707, 40.14697789849136] },
            { id: 2, title: "三家店村", code: 0.86, position: [116.61262110795957,40.14993015449165] },
            { id: 3, title: "南卷村", code: 1.49, position: [116.62446575430846,40.15399759618978] },
            { id: 4, title: "东杜兰村", code: 0.33, position: [116.6050894529534,40.14615773975543] },
            { id: 5, title: "西海洪村", code: 0.71, position: [116.62000247481868,40.145600089333314] },
            { id: 6, title: "东海洪村", code: 1.35, position: [116.62369320316401,40.1410072132005] },
            { id: 7, title: "北法信村", code: 1.34, position: [116.61360808696237,40.13736554348905] },
            { id: 8, title: "大江洼村", code: 0.19, position: [116.59880232394205,40.135495461869105] },
            { id: 9, title: "焦各庄村", code: 0.62, position: [116.60794331077992,40.13277217936702] },
            { id: 10, title: "刘家河村", code: 1.12, position: [116.61189149628572,40.12830969412716] },
            { id: 11, title: "南法信村", code: 2.43, position: [116.60880165103403,40.11908859518438] }
          ];

          break;
        case 5:
          this.caseList = [
            { id: 1, title: "西杜兰村", code: 3082, position: [116.59502580648707, 40.14697789849136] },
            { id: 2, title: "三家店村", code: 2486, position: [116.61262110795957,40.14993015449165] },
            { id: 3, title: "南卷村", code: 3347, position: [116.62446575430846,40.15399759618978] },
            { id: 4, title: "东杜兰村", code: 1228, position: [116.6050894529534,40.14615773975543] },
            { id: 5, title: "西海洪村", code: 1960, position: [116.62000247481868,40.145600089333314] },
            { id: 6, title: "东海洪村", code: 4360, position: [116.62369320316401,40.1410072132005] },
            { id: 7, title: "北法信村", code: 4596, position: [116.61360808696237,40.13736554348905] },
            { id: 8, title: "大江洼村", code: 891, position: [116.59880232394205,40.135495461869105] },
            { id: 9, title: "焦各庄村", code: 2005, position: [116.60794331077992,40.13277217936702] },
            { id: 10, title: "刘家河村", code: 3950, position: [116.61189149628572,40.12830969412716] },
            { id: 11, title: "南法信村", code: 13065, position: [116.60880165103403,40.11908859518438] }
          ];

          break;
        case 6:
          this.caseList = [
            { id: 1, title: "西杜兰村", code: 1605.21, position: [116.59502580648707, 40.14697789849136] },
            { id: 2, title: "三家店村", code: 2890.70, position: [116.61262110795957,40.14993015449165] },
            { id: 3, title: "南卷村", code: 2246.31, position: [116.62446575430846,40.15399759618978] },
            { id: 4, title: "东杜兰村", code: 3721.21, position: [116.6050894529534,40.14615773975543] },
            { id: 5, title: "西海洪村", code: 2760.56, position: [116.62000247481868,40.145600089333314] },
            { id: 6, title: "东海洪村", code: 3229.63, position: [116.62369320316401,40.1410072132005] },
            { id: 7, title: "北法信村", code: 3429.85, position: [116.61360808696237,40.13736554348905] },
            { id: 8, title: "大江洼村", code: 4689.47, position: [116.59880232394205,40.135495461869105] },
            { id: 9, title: "焦各庄村", code: 3233.87, position: [116.60794331077992,40.13277217936702] },
            { id: 10, title: "刘家河村", code: 3526.79, position: [116.61189149628572,40.12830969412716] },
            { id: 11, title: "南法信村", code: 5376.54, position: [116.60880165103403,40.11908859518438] }
          ];

          break;

      }
      this.map.setCenter([116.604915,40.138216])
      this.map.setZoom(15)
      this.addBjPointsListToMap()

      let dataList = this[this.funCodeArr[this.activeNumIndex]]
      this.barChartInit(
        dataList,
        this.areaLabelList,
        this.funTitleArr[this.activeNumIndex]
      );
      // this.removeMapMarkers()
      console.log(dataList,
        this.areaLabelList,
        this.funTitleArr[this.activeNumIndex])
      for(var i=0;i<this.areaLabelList.length;i++){
        this.addMarkerToMap({
          label:this.areaLabelList[i],
          count:dataList[i],
          position:this.areaPositionList[i]
        })
      }

    },
    //获取某镇的数据
    getAreaData() {
      console.log(this.filterForm);
      this.areaDataLoading = true;
      setTimeout(() => {
        this.areaDataLoading = false;

        this.areaDataList = [
          {
            id: "001",
            areaName: "复兴村",
            position:[113.220204,35.9439],
            actualArea: 34.54,
            gridNumber: 69,
            gridAverageSize: 0.54,
            responsibilityGridNumber: 24,
            responsibilityGridAverageSize: 1.44,
            componentNum: 7360,
            componentDensity: 213.09
          },
          {
            id: "002",
            areaName: "北兴村",
            position:[120.646962,41.625007],
            actualArea: 56.54,
            gridNumber: 33,
            gridAverageSize: 3,
            responsibilityGridNumber: 56,
            responsibilityGridAverageSize: 2.14,
            componentNum: 6542,
            componentDensity: 315
          },
          {
            id: "003",
            areaName: "区域3",
            position:[108.298329,39.216633],
            actualArea: 66,
            gridNumber: 35,
            gridAverageSize: 7,
            responsibilityGridNumber: 66,
            responsibilityGridAverageSize: 1.98,
            componentNum: 5632,
            componentDensity: 125
          },
          {
            id: "004",
            areaName: "区域4",
            position:[106.057118,36.898641],
            actualArea: 78,
            gridNumber: 36,
            gridAverageSize: 12,
            responsibilityGridNumber: 6,
            responsibilityGridAverageSize: 2.56,
            componentNum: 3652,
            componentDensity: 325
          },
          {
            id: "005",
            areaName: "区域5",
            position:[107.155751,36.015024],
            actualArea: 35,
            gridNumber: 26,
            gridAverageSize: 32,
            responsibilityGridNumber: 12,
            responsibilityGridAverageSize: 3.54,
            componentNum: 5846,
            componentDensity: 136
          },
          {
            id: "006",
            areaName: "区域6",
            position:[107.770985,37.772144],
            actualArea: 56.54,
            gridNumber: 33,
            gridAverageSize: 3,
            responsibilityGridNumber: 56,
            responsibilityGridAverageSize: 2.14,
            componentNum: 6542,
            componentDensity: 315
          },
          {
            id: "007",
            areaName: "区域7",
            position:[107.814931,35.801461],
            actualArea: 66,
            gridNumber: 35,
            gridAverageSize: 7,
            responsibilityGridNumber: 66,
            responsibilityGridAverageSize: 1.98,
            componentNum: 5632,
            componentDensity: 125
          },
          {
            id: "008",
            areaName: "区域8",
            position:[108.737782,37.876281],
            actualArea: 78,
            gridNumber: 36,
            gridAverageSize: 12,
            responsibilityGridNumber: 6,
            responsibilityGridAverageSize: 2.56,
            componentNum: 3652,
            componentDensity: 325
          },
          {
            id: "009",
            areaName: "区域9",
            position:[111.594227,36.581699],
            actualArea: 35,
            gridNumber: 26,
            gridAverageSize: 32,
            responsibilityGridNumber: 12,
            responsibilityGridAverageSize: 3.54,
            componentNum: 5846,
            componentDensity: 136
          },
          {
            id: "010",
            areaName: "区域10",
            position:[107.06786,35.22915],
            actualArea: 35,
            gridNumber: 26,
            gridAverageSize: 32,
            responsibilityGridNumber: 12,
            responsibilityGridAverageSize: 3.54,
            componentNum: 5846,
            componentDensity: 136
          },
          {
            id: "011",
            areaName: "区域11",
            position:[107.06786,35.22915],
            actualArea: 56.54,
            gridNumber: 33,
            gridAverageSize: 3,
            responsibilityGridNumber: 56,
            responsibilityGridAverageSize: 2.14,
            componentNum: 6542,
            componentDensity: 315
          },
          {
            id: "012",
            areaName: "区域12",
            position:[119.943837,36.369678],
            actualArea: 66,
            gridNumber: 35,
            gridAverageSize: 7,
            responsibilityGridNumber: 66,
            responsibilityGridAverageSize: 1.98,
            componentNum: 5632,
            componentDensity: 125
          },
          {
            id: "013",
            areaName: "区域13",
            position:[110.891102,31.711015],
            actualArea: 78,
            gridNumber: 36,
            gridAverageSize: 12,
            responsibilityGridNumber: 6,
            responsibilityGridAverageSize: 2.56,
            componentNum: 3652,
            componentDensity: 325
          },
          {
            id: "014",
            areaName: "区域14",
            position:[105.485829,33.963086],
            actualArea: 35,
            gridNumber: 26,
            gridAverageSize: 32,
            responsibilityGridNumber: 12,
            responsibilityGridAverageSize: 3.54,
            componentNum: 5846,
            componentDensity: 136
          },
          {
            id: "015",
            areaName: "区域15",
            position:[117.395009,29.555918],
            actualArea: 35,
            gridNumber: 26,
            gridAverageSize: 32,
            responsibilityGridNumber: 12,
            responsibilityGridAverageSize: 3.54,
            componentNum: 5846,
            componentDensity: 136
          },
          {
            id: "016",
            areaName: "区域16",
            position:[111.857899,33.524587],
            actualArea: 56.54,
            gridNumber: 33,
            gridAverageSize: 3,
            responsibilityGridNumber: 56,
            responsibilityGridAverageSize: 2.14,
            componentNum: 6542,
            componentDensity: 315
          },
          {
            id: "017",
            areaName: "区域17",
            position:[111.770009,38.669768],
            actualArea: 66,
            gridNumber: 35,
            gridAverageSize: 7,
            responsibilityGridNumber: 66,
            responsibilityGridAverageSize: 1.98,
            componentNum: 5632,
            componentDensity: 125
          },
          {
            id: "018",
            areaName: "区域18",
            position:[110.803212,35.623052],
            actualArea: 78,
            gridNumber: 36,
            gridAverageSize: 12,
            responsibilityGridNumber: 6,
            responsibilityGridAverageSize: 2.56,
            componentNum: 3652,
            componentDensity: 325
          },
          {
            id: "019",
            areaName: "区域19",
            position:[111.857899,36.687492],
            actualArea: 35,
            gridNumber: 26,
            gridAverageSize: 32,
            responsibilityGridNumber: 12,
            responsibilityGridAverageSize: 3.54,
            componentNum: 5846,
            componentDensity: 136
          },
          {
            id: "020",
            areaName: "区域20",
            position:[112.736806,29.13455],
            actualArea: 56.54,
            gridNumber: 33,
            gridAverageSize: 3,
            responsibilityGridNumber: 56,
            responsibilityGridAverageSize: 2.14,
            componentNum: 6542,
            componentDensity: 315
          },
          {
            id: "021",
            areaName: "区域21",
            position:[120.119618,36.86349],
            actualArea: 66,
            gridNumber: 35,
            gridAverageSize: 7,
            responsibilityGridNumber: 66,
            responsibilityGridAverageSize: 1.98,
            componentNum: 5632,
            componentDensity: 125
          },
          {
            id: "022",
            areaName: "区域22",
            position:[117.922352,33.744117],
            actualArea: 78,
            gridNumber: 36,
            gridAverageSize: 12,
            responsibilityGridNumber: 6,
            responsibilityGridAverageSize: 2.56,
            componentNum: 3652,
            componentDensity: 325
          },
          {
            id: "023",
            areaName: "区域23",
            position:[117.087391,41.295676],
            actualArea: 35,
            gridNumber: 26,
            gridAverageSize: 32,
            responsibilityGridNumber: 12,
            responsibilityGridAverageSize: 3.54,
            componentNum: 5846,
            componentDensity: 136
          }
        ];
        this.dataTransform();
        this.numClickHandler(0)
      }, 0);
    },
    //列表数据整理
    dataTransform() {
      let list = this.areaDataList;
      this.actualAreaList = [];
      this.gridNumberList = [];
      this.gridAverageSizeList = [];
      this.responsibilityGridNumberList = [];
      this.responsibilityGridAverageSizeList = [];
      this.componentNumList = [];
      this.componentDensityList = [];
      this.areaLabelList = [];
      for (var i=0;i<  list.length;i++) {
        var item = list[i];
        this.actualAreaList.push(item.actualArea);
        this.gridNumberList.push(item.gridNumber);
        this.gridAverageSizeList.push(item.gridAverageSize);
        this.responsibilityGridNumberList.push(item.responsibilityGridNumber);
        this.responsibilityGridAverageSizeList.push(
          item.responsibilityGridAverageSize
        );
        this.componentNumList.push(item.componentNum);
        this.componentDensityList.push(item.componentDensity);
        this.areaLabelList.push(item.areaName);
        this.areaPositionList.push(item.position)
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../css/mixin.less";
.overlay-container {
  display: flex;
  position: absolute;
  z-index: 20;
  top: 1rem;
  left: 1rem;
  width: 36rem;
  flex-direction: column;
  height: calc(100% - 2rem);
  .zm-box4 {
    justify-content: space-between;
    flex: 1;
  }
}
.barChartBox {
  height: 14rem;
  margin-top: 0.5rem;
}
</style>
